<script setup lang="ts">
import { ref } from "vue";
import { useForm } from "./utils/form";
import { FormProps } from "./utils/types";
import { PureTableBar } from "@/components/RePureTableBar";

const {
  pieChartRef,
  setFormInlineToTsx,
  loading,
  columns,
  dataList,
  pagination,
  onSearch,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
} = useForm();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    creater: "",
    name: "",
    paperid: "",
    paperName: "",
    starttime: "",
    endtime: "",
    del: 0,
    description: "",
    addtime: "",
    updatetime: ""
  })
});
const newFormInline = ref(props.formInline);
setFormInlineToTsx(newFormInline.value);
</script>

<template>
  <el-card shadow="never">
    <el-row :gutter="24">
      <el-col
        :xs="24"
        :sm="8"
        :md="11"
        :lg="12"
        :xl="12"
        v-motion
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 200
          }
        }"
      >
        <p class="font-medium pt-1">分布情况</p>
        <!-- <Line class="echart mt-[10px]" /> -->
        <div
          ref="pieChartRef"
          class="echart mt-[10px]"
          style="width: 100%; height: 35vh"
        />
      </el-col>

      <el-col
        :xs="24"
        :sm="16"
        :md="13"
        :lg="12"
        :xl="12"
        v-motion
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 200
          }
        }"
      >
        <PureTableBar title="学员列表" :columns="columns" @refresh="onSearch">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              align-whole="center"
              showOverflowTooltip
              table-layout="auto"
              :loading="loading"
              :size="size"
              adaptive
              :data="dataList"
              :columns="dynamicColumns"
              :pagination="pagination"
              :paginationSmall="size === 'small' ? true : false"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
              @selection-change="handleSelectionChange"
              @page-size-change="handleSizeChange"
              @page-current-change="handleCurrentChange"
              border
            />
          </template>
        </PureTableBar>
      </el-col>
    </el-row>
  </el-card>
</template>

<style lang="scss" scoped>
:deep(.el-table__row.warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

:deep(.el-table__row.success-row) {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
